/**
 * monitor/index
 * 是监控页上边白色的标签页（黑色的那行下面）
 */

import Vue from 'vue';
import busHolder from '../../vue/bus';
import { defaultScreenTabs, defaultGeneralTabs, resetTabs, allTabs, getMonitor,
    createScreenJump, createScreenRemovedJump } from '../screen/monitor';
    import { KEY_JUMP, KEY_TAB_CHANGED, KEY_SCREEN_DESTROYED } from '../screen/events';
import './bodyGeneralMain';
import './bodyScreenSituation';
import './bodyScreenRemoved';
import './contentWait';

let bus = busHolder.getBus;

Vue.component("monitor-tab", {
  template : `
<div>
  <body-general-main v-if="type == 'general'"></body-general-main>
  <body-screen-removed v-else-if="type == 'screenRemoved'" :sid="sid"></body-screen-removed>
  <a-tabs :active-key="activeKey" @change="onTabRedirect" v-else>
    <a-tab-pane :key="item.key" v-for="item in tabItems">
      <span slot="tab">
        <a-icon :type="item.icon" v-if="item.icon"></a-icon>
        {{item.name}}
      </span>
      <component :is="item.component" :sid="sid" :type="type"
          :params="{key:item.key}"
          @bodyloaded="(d) => onBodyLoaded(d, item)">
        {{item.component}}
      </component>
    </a-tab-pane>
  </a-tabs>
</div>
  `,
  data : function () {
    return {
      activeKey : 'main',
      tabItems : [],
    };
  },

  props : {
    /**
     * 'general'
     * 'screen' : sid 有效.
     * 'screenRemoved' : sid 有效;
     *    该项仅在你查看 A 屏幕时, A 屏幕被删了, 就会跳转到这里. 无法手动调转.
     */
    type : String,
    /**
     * 不仅是屏幕号.
     * type = 'general' 时, 该数据无效
     */
    sid : String
  },

  methods : {
    onBodyLoaded : function (loadResult, item) {
      // 直接修改 monitor 里面指定 tab 对应的 component, 因为装载完了
      let tab = getMonitor(loadResult.monitorName).tabs.find(t => t.key == loadResult.key);
      if (tab == null) {
        console.error('装载 tab 失败: ', loadResult);
        return;
      }
      tab.component = item.component = loadResult.compName;
      // 获取初始的 tabs
      resetTabs(getMonitor(loadResult.monitorName).tabs);
      bus().$emit(KEY_TAB_CHANGED, null);
    },
    onTabRedirect : function (key) {
      if (this.type === 'screen') {
        bus().$emit(KEY_JUMP, createScreenJump(this.sid, key));
      }
    },
    // 接收端
    onScreenDestroyed : function (sid) {
      if (sid === this.sid && this.type === 'screen') {
        bus().$emit(KEY_JUMP, createScreenRemovedJump(sid));
      }
    },
    onJump : function (jump) {
      if (jump.aside != this.type || jump.asideParam != this.sid) {
        return;
      }
      this.activeKey = jump.tabKey;
    },
    onTabChanged : function () {
      this.tabItems = allTabs();
    }
  },

  mounted : function () {
    let tabItems;
    switch (this.type) {
    case 'screen':
      tabItems = defaultScreenTabs();
      break;
    case 'screenRemoved':
      tabItems = defaultGeneralTabs();
      break;
    default: // general
      tabItems = defaultGeneralTabs();
      if (this.type != 'general') this.type = 'general';
      break;
    }

    resetTabs(tabItems);
    this.tabItems = tabItems;

    bus().$on(KEY_SCREEN_DESTROYED, this.onScreenDestroyed);
    bus().$on(KEY_TAB_CHANGED, this.onTabChanged);
    bus().$on(KEY_JUMP, this.onJump);
  },

  destroyed : function () {
    bus().$off(KEY_SCREEN_DESTROYED, this.onScreenDestroyed);
    bus().$off(KEY_TAB_CHANGED, this.onTabChanged);
    bus().$on(KEY_JUMP, this.onJump);
  }
});

export { };
